<template>
	<view style="background-color: #ffdd82;">
		<!-- 自定义导航 -->
		<uni-nav-bar
			left-icon="back"
			@clickLeft="backTo()"
			backgroundColor="#ffdd82"
			:border="false" statusBar
		></uni-nav-bar>
		<view>
			<!-- 标题 -->
			<view class="title">
				幸运大转盘
				<!-- <image src="../../static/title1.png" mode="widthFix"></image> -->
			</view>
			<!--  -->
			<!-- <view class="desc">每日福利 100%中奖</view> -->
			<!-- 抽奖转盘 -->
			<view id="content">
				<!-- 抽奖转盘 -->
				<view id="zhuan" ref="zhuan"></view>
				<!-- 指针 -->
				<image src="../../static/arrow1.png" mode="widthFix" @click="throttle()"></image>
				<!-- <image src="../../static/arrow1.png" mode="widthFix" @click="wheelSurf()"></image> -->
			</view>
			<!-- 剩余抽奖次数 -->
			<view class="count">剩余抽奖次数：{{ count }}</view>
			<!-- 规则说明 -->
			<view class="rule">
				<view>
					<view class="line"></view>
					<view>规则说明</view>
					<view class="line"></view>
				</view>
				<view>
					<view>
						<view>1</view>
						<view>
							登陆成功后，每人每天有5次抽奖机会，第一次可以直接抽奖，其余四次机会可通过看视频来获取，每完整看完一次即可进行一次抽奖。
						</view>
					</view>
					<view>
						<view>2</view>
						<view>观看视频过程中请勿退出，若退出则视为放弃本次抽奖机会。</view>
					</view>
					<view>
						<view>3</view>
						<view>抽奖机会将在每日凌晨0点刷新</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
// 引入 moment
import moment from 'moment';
export default {
	data() {
		return {
			// 抽奖次数存本地  。。。。
			count: uni.getStorageSync('count'),
			run: true
		};
	},
	computed: {
		...mapState(['user','isLogin'])
	},
	methods: {
		...mapMutations(['updateUser', 'updateCount']),
		// 返回上一页
		backTo() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 显示模态框
		showToast(msg) {
			uni.showToast({
				title: msg,
				icon: 'none',
				duration: 2500
			});
		},
		// 点击抽奖
		wheelSurf() {
			if (this.count == 0) {
				this.showToast('今日抽奖次数已用完,明天再来');
				return;
			}
			this.count--;
			this.updateCount(this.count);
			// this.$store.commit('updateCount',this.count)
			console.log(this.count);
			console.log(uni.getStorageSync('count'));
			let num = Math.floor(Math.random() * 3600); //求得随机的旋转度数
			// console.log(this.$refs.zhuan) //this.$refs.zhuan.$el 当前元素
			this.$refs.zhuan.$el.style.transform = `rotate(${num}deg)`;
			// document.querySelector('#zhuan').style.transform = `rotate(${num}deg)`;
			num %= 360; //num=num%360;模360后的余数，
			//得到一个1至360的数值，进行转盘分成几分的判断
			//设定旋转变换3秒后执行下面的提示
			let vm = this;
			let integral = this.user.integral;
			setTimeout(function() {
				if (num <= 45 * 1) {
					vm.updateIntegral(integral + 38, '恭喜获得38金币');
					// vm.showToast('恭喜获得38金币'); //()
				} else if (num <= 45 * 2) {
					vm.updateIntegral(integral + 10000, '恭喜获得1万金币');
					// this.showToast('恭喜获得1万金币');
				} else if (num <= 45 * 3) {
					vm.updateIntegral(integral + 88, '恭喜获得88金币');
					// vm.showToast('恭喜获得88金币');
				} else if (num <= 45 * 4) {
					vm.updateIntegral(integral + 50000, '恭喜获得5万金币');
					// vm.showToast('恭喜获得5万金币');
				} else if (num <= 45 * 5) {
					vm.updateIntegral(integral + 68, '恭喜获得68金币');
					// vm.showToast('恭喜获得68金币');
				} else if (num <= 45 * 6) {
					vm.updateIntegral(integral + 100000, '恭喜获得10万金币');
					// vm.showToast('恭喜获得10万金币');
				} else if (num <= 45 * 7) {
					vm.updateIntegral(integral + 888, '恭喜获得888金币');
					// vm.showToast('恭喜获得888金币');
				} else {
					vm.updateIntegral(integral + 168, '恭喜获得168金币');
					// vm.showToast('恭喜获得168金币');
				}
			}, 3000);
		},
		// 节流
		throttle() {
			if (this.run) {
				this.run = false;
				this.wheelSurf();
				setTimeout(() => {
					this.run = true;
				}, 4000);
			}
		},
		// 更新金币数量
		updateIntegral(integral, msg) {
			// 发送请求
			uni.request({
				url: `${getApp().globalData.baseURL}/v1/user/updateCoins`,
				data: { id: this.user.id, integral },
				method: 'PUT',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: res => {
					console.log(res);
					if (res.data.code == 200) {
						// 成功
						// 更新user中integral
						this.user.integral = integral;
						console.log(this.user);
						this.updateUser(this.user);
						// showToast
						this.showToast(msg);
					}
				}
			});
		},
		// 每日零点更新抽奖次数
		resetCount() {
			let nowTemp = new Date().getTime();
			let lastTemp = uni.getStorageSync('wheelsurf').nowTemp;
			console.log(nowTemp-lastTemp)
			let exp = uni.getStorageSync('wheelsurf').exp;
			// 如果本地不存在count 或者 count存在 且距离上次记录时间>过期时间
			if (uni.getStorageSync('count')==='' || (uni.getStorageSync('count')!==null && nowTemp - lastTemp >= exp)) {
				// 设置count 并记录当前时间和过期时间
				uni.setStorageSync('count', 5);
				// 第二天时间戳
				let temorrow =
					moment()
						.add(1, 'days')
						.format()
						.substr(0, 10) + ' 00:00:00';
				let temorrowTemp = new Date(temorrow).getTime();
				exp = temorrowTemp - nowTemp;
				uni.setStorageSync('wheelsurf', { nowTemp, exp });
			}
		},
	},
	onLoad() {
		if(this.isLogin) this.resetCount()
		// this.resetCount()
		// console.log(moment().add(1,'days').format().substr(0,10)+' 00:00:00')
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: #ffdd82;
}
.title {
	width: 96%;
	padding: 8rpx 40rpx 10rpx;
	margin-bottom: 20rpx;
	// height: 48rpx;
	text-align: center;
	font-size: 64rpx;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: #fff;
	> image {
		width: 100%;
	}
}
.desc {
	margin: 16rpx auto;
	width: 260rpx;
	padding: 10rpx 30rpx;
	text-align: center;
	color: #fafafa;
	// box-sizing: border-box;
	background-color: rgba(255, 143, 22, 0.4);
}
// 转盘
/*转盘背景*/
#content {
	width: 660rpx;
	height: 660rpx;
	background: url('../../static/disc-bg.png') no-repeat;
	background-size: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;
}

/*抽奖转盘*/
#zhuan {
	width: 540rpx;
	height: 540rpx;
	background: url(../../static/zhuanpan1.png) no-repeat;
	background-size: 100%;
	margin: 56rpx 0 0 60rpx;
	transition: all 3s ease;
	/*3秒变换一次*/
}

/*转盘指针*/
#content image {
	width: 260rpx;
	position: absolute;
	top: 80rpx;
	left: 200rpx;
	cursor: pointer;
}
.count {
	width: 300rpx;
	margin: 6rpx auto;
	padding: 10rpx 30rpx;
	background-color: #ff9a2d;
	text-align: center;
	// color: #fff;
	border-radius: 32rpx;
}
// 规则
.rule {
	padding: 20rpx 40rpx 10rpx;
	> view:first-child {
		display: flex;
		justify-content: center;
		align-items: center;
		> .line {
			width: 140rpx;
			height: 2rpx;
			background-color: #fff;
			margin: 0 20rpx;
		}
	}
	> view:last-child {
		> view {
			padding: 16rpx;
			width: 100%;
			display: flex;
			// align-items: baseline;
			> view:first-child {
				width: 30rpx;
				height: 30rpx;
				margin-top: 8rpx;
				margin-right: 20rpx;
				text-align: center;
				line-height: 32rpx;
				background-color: #f1f1f1;
			}
			> view:last-child {
				width: 100%;
				color: #333;
			}
		}
	}
}
</style>
